<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>课堂</title>
  <link rel="stylesheet" href="./lib/dcloud-mui/dist/css/mui.min.css">
  <link rel="stylesheet" href="./css/main.min.css">
  <script src="./lib/dcloud-mui/dist/js/mui.min.js" charset="utf-8"></script>
  <script src="./fonts/iconfont.js" charset="utf-8"></script>
  <script src="./js/ost.js" charset="utf-8"></script>
</head>

<body>

  <div class="mui-content">
    <div id="ost_classRoom" class="mui-slider">

      <!-- 选项卡盒子 -->
      <div id="ost_classTabBox">

        <!-- 选项卡导航 -->
        <div id="ost_classTab" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
          <a class="mui-control-item" href="#class_FAQ.html">
            <svg class="icon ost_indexSubnavTitle" aria-hidden="true">
              <use xlink:href="#icon-ost_fontChangjianwen"></use>
            </svg>
  			  </a>
          <a class="mui-control-item" href="#class_basic.html">
            <svg class="icon ost_indexSubnavTitle" aria-hidden="true">
              <use xlink:href="#icon-ost_fontJichujiaoche"></use>
            </svg>
  			  </a>
          <a class="mui-control-item" href="#class_advance.html">
            <svg class="icon ost_indexSubnavTitle" aria-hidden="true">
              <use xlink:href="#icon-ost_fontJinjiejiaoch"></use>
            </svg>
  			  </a>
          <a class="mui-control-item" href="#class_Live.html">
            <svg class="icon ost_indexSubnavTitle" aria-hidden="true">
              <use xlink:href="#icon-ost_fontDaketang"></use>
            </svg>
  			  </a>
        </div>

        <!-- 选项卡状态栏 -->
        <div class="mui-slider-progress-bar mui-col-xs-3" id="ost_classTabActive"></div>
      </div>

      <!-- 选项卡内容 -->
      <div class="mui-slider-group">
        <div id="ost_classFAQ" class="mui-slider-item mui-control-content mui-active">
          <div id="scroll1" class="mui-scroll-wrapper">
            <div class="mui-scroll">
              <ul class="mui-table-view mui-table-view-chevron">
                <li class="mui-table-view-cell mui-media">
                  <a class="mui-navigate-right" href="#account">
                    <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ1.png">
                    <div class="mui-media-body">什么叫做保底工资？
                      <p class="mui-ellipsis">主播的保底工资到底是怎么样计算？</p>
                    </div>
                  </a>
                </li>
                <li class="mui-table-view-cell mui-media">
                  <a class="mui-navigate-right" href="#account">
                    <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ2.png">
                    <div class="mui-media-body">什么叫做有效时长？
                      <p class="mui-ellipsis">有效时长主播应该怎么样来计算？</p>
                    </div>
                  </a>
                </li>
                <li class="mui-table-view-cell mui-media">
                  <a class="mui-navigate-right" href="#account">
                    <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ3.png">
                    <div class="mui-media-body">怎么样才能成为一名优秀的主播？
                      <p class="mui-ellipsis">……</p>
                    </div>
                  </a>
                </li>
                <li class="mui-table-view-cell mui-media">
                  <a class="mui-navigate-right" href="#account">
                    <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ4.png">
                    <div class="mui-media-body">OST娱乐可以帮助你做些什么？
                      <p class="mui-ellipsis">你想了解……</p>
                    </div>
                  </a>
                </li>
                <li class="mui-table-view-cell mui-media">
                  <a class="mui-navigate-right" href="#account">
                    <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ5.png">
                    <div class="mui-media-body">OST娱乐的结算规则是什么？
                      <p class="mui-ellipsis">到底应该怎么样来结算？</p>
                    </div>
                  </a>
                </li>
                <li class="mui-table-view-cell mui-media">
                  <a class="mui-navigate-right" href="#account">
                    <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ1.png">
                    <div class="mui-media-body">为什么选择OST娱乐？
                      <p class="mui-ellipsis">……</p>
                    </div>
                  </a>
                </li>
                <li class="mui-table-view-cell mui-media">
                  <a class="mui-navigate-right" href="#account">
                    <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ1.png">
                    <div class="mui-media-body">为什么选择OST娱乐？
                      <p class="mui-ellipsis">……</p>
                    </div>
                  </a>
                </li>
                <li class="mui-table-view-cell mui-media">
                  <a class="mui-navigate-right" href="#account">
                    <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ1.png">
                    <div class="mui-media-body">为什么选择OST娱乐？
                      <p class="mui-ellipsis">……</p>
                    </div>
                  </a>
                </li>
                <li class="mui-table-view-cell mui-media">
                  <a class="mui-navigate-right" href="#account">
                    <img class="mui-media-object mui-pull-left head-img" src="./images/class1/FAQ1.png">
                    <div class="mui-media-body">为什么选择OST娱乐？
                      <p class="mui-ellipsis">……</p>
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div id="ost_classBasic" class="mui-slider-item mui-control-content">
          <div id="scroll2" class="mui-scroll-wrapper">
            <div class="mui-scroll">
              <div class="mui-loading">
                <div class="mui-spinner"></div>
              </div>
            </div>
          </div>
        </div>
        <div id="ost_classAdvanc" class="mui-slider-item mui-control-content">
          <div id="scroll3" class="mui-scroll-wrapper">
            <div class="mui-scroll">
              <div class="mui-loading">
                <div class="mui-spinner"></div>
              </div>
            </div>
          </div>
        </div>
        <div id="ost_classLive" class="mui-slider-item mui-control-content">
          <div id="scroll3" class="mui-scroll-wrapper">
            <div class="mui-scroll">
              <div class="mui-loading">
                <div class="mui-spinner"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--导航-->
  <nav class="mui-bar mui-bar-tab" id="ost_nav">
    <a class="mui-tab-item" id="page_index" href="./index.html">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-ost_shouye"></use>
      </svg>
      <span>首页</span>
    </a>
    <a class="mui-tab-item" id="page_classRoom" href="./class_FAQ.html">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-ost_ketang_hover"></use>
      </svg>
      <span>课堂</span>
    </a>
    <a class="mui-tab-item" id="page_mine" href="./mine.html">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-ost_wode"></use>
      </svg>
      <span>我的</span>
    </a>
  </nav>

  <script>
    (function($) {
      // 设置选项卡内容的高度
      document.getElementById("ost_classFAQ").style.minHeight = window.screen.availHeight - 110 + "px";
      document.getElementById("ost_classBasic").style.minHeight = window.screen.availHeight - 110 + "px";
      document.getElementById("ost_classAdvanc").style.minHeight = window.screen.availHeight - 110 + "px";
      document.getElementById("ost_classLive").style.minHeight = window.screen.availHeight - 110 + "px";
      // 选项卡内容加载
      $('.mui-scroll-wrapper').scroll({
        indicators: true //是否显示滚动条
      });
      var html2 =
        '<img src="./images/class2/detail_shebei.jpg"/><img src="./images/class2/detail_yizhuo.jpg"/><img src="./images/class2/detail_dengguang.jpg"/><img src="./images/class2/detail_huanjing.jpg"/><img src="./images/class2/detail_huanjing.jpg"/>';
      var html3 =
        '<img src="./images/class3/advanc_huashu.jpg"/><img src="./images/class3/advanc_fensi.jpg"/><img src="./images/class3/advanc_xianxia.jpg"/><img src="./images/class3/advanc_caiyi.jpg"/><img src="./images/class3/advanc_caiyi.jpg"/>';
      var html4 =
        '<ul class="mui-table-view"><li class="mui-table-view-cell"><a class="mui-navigate-right"><svg class="icon" style="font-size:50px;" aria-hidden="true"><use xlink:href="#icon-ost_fontHotlive"></use></svg></a>' +
        '<div class="mui-slider"><div class="mui-slider-group mui-slider-loop"><div class="mui-slider-item"><ul class="mui-table-view mui-grid-view"><li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="./images/class4/video_hot1.jpg"></a></li>' +
        '<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="./images/class4/video_hot2.jpg"></a></li></ul></div><div class="mui-slider-item">' +
        '<ul class="mui-table-view mui-grid-view"><li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="./images/class4/video_hot3.jpg"></a></li>' +
        '<li class="mui-table-view-cell mui-media mui-col-xs-6"><a href="#"><img class="mui-media-object" src="./images/class4/video_hot1.jpg"></a></li></ul></div></div></li>' +
        '<li class="mui-table-view-cell"><a class="mui-navigate-right"><svg class="icon" style="font-size:40px;" aria-hidden="true"><use xlink:href="#icon-ost_fontShortvideo"></use></svg></a></li></ul>';
      var item2 = document.getElementById('ost_classBasic');
      var item3 = document.getElementById('ost_classAdvanc');
      var item4 = document.getElementById('ost_classLive');
      document.getElementById('ost_classRoom').addEventListener('slide', function(e) {
        if (e.detail.slideNumber === 1) {
          if (item2.querySelector('.mui-loading')) {
            setTimeout(function() {
              item2.querySelector('.mui-scroll').innerHTML = html2;
            }, 500);
          }
        } else if (e.detail.slideNumber === 2) {
          if (item3.querySelector('.mui-loading')) {
            setTimeout(function() {
              item3.querySelector('.mui-scroll').innerHTML = html3;
            }, 500);
          }
        } else if (e.detail.slideNumber === 3) {
          if (item4.querySelector('.mui-loading')) {
            setTimeout(function() {
              item4.querySelector('.mui-scroll').innerHTML = html4;
            }, 500);
          }
        }
      });
      var ost_classTab = document.getElementById('ost_classTab');
      $('.mui-input-group').on('change', 'input', function() {
        if (this.checked) {
          ost_classTab.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
          ost_classTabActive.setAttribute('style', ost_classTabActive.getAttribute('style'));
        }
      });
      // 解决 a标签 不能跳转页面问题[监听tap事件]
      mui("nav").on("tap", "a", function() {
        document.location.href = this.href;
      });
    })(mui);
  </script>

</body>

</html>
